<template>
    <ul class="list">
      <li class="listitem"
          v-for="(item,key) in citylist"
          :key="key"
          @click="handleonclick"
      >
        {{key}}
      </li>
    </ul>
</template>

<script>
export default {
  name: 'cityalphabet',
  props: {
    citylist: Object
  },
  methods: {
    handleonclick (e) {
      this.$emit('Alpchange', e.target.innerText)
    }
  }
}
</script>

<style scoped>
  .list{
    position: absolute;
    height: 100%;
    top: 0;
    right: 0;
    list-style: none;
    margin: 0;
    padding: 0 5px;
    padding-top: 130px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .listitem{
    padding-left: 40px;
    color: #00d3d3;
    line-height: 20px;
    font-size: 0.9rem;
  }
</style>
